import Card from '@/components/Card';
import Empty from '@/components/Empty';
import Tabs from '@/components/Tabs';
import { riskControllerGetBoxList as getData } from '@/services/ess/diagnosisRisk';
import { Flex, Modal } from 'antd';
import cls from 'classnames';
import React, { useEffect, useState } from 'react';
import { useIntl, useModel } from 'umi';
import RiskList from './components/RiskList';
import Styles from './index.less';

const List: React.FC = () => {
  const { stationId } = useModel('@@initialState')?.initialState || {};
  const [pageData, setPageData] = useState<API.BoxInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [riskClusterItem, setRiskClusterItem] = useState({});
  const intl = useIntl();

  const [isModalOpen, setIsModalOpen] = useState(false);
  useEffect(() => {
    (async function () {
      try {
        const res = await getData({ stationId });
        if (res.success) {
          setPageData(res.data || []);
        }
        setLoading(false);
      } catch (error) {
        setLoading(false);
      }
    })();
  }, []);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <Card
      title={intl.formatMessage({ id: 'diagnosticPrediction.riskPrediction.title' })}
      extra={
        <span>
          {intl.formatMessage({ id: 'diagnosticPrediction.riskPrediction.referenceOnly' })}
        </span>
      }
      loading={loading}
    >
      {pageData?.length ? (
        <Flex gap={24} wrap="wrap">
          {pageData.map((item) => (
            <div className={Styles.batteryItem} key={item.code}>
              <h5 className={Styles.title}>
                {intl.formatMessage({ id: 'diagnosticPrediction.riskPrediction.energyBox' })}
                {item.name}
              </h5>
              <Flex className={Styles.contentBox}>
                {(item.clusterList || []).map((clusterItem: ClusterInfo, _index) => {
                  const isRisk =
                    clusterItem?.voltageRiskCount > 0 || clusterItem?.tempRiskCount > 0;
                  return (
                    <div
                      className={cls({
                        [Styles.crowd]: true,
                        [Styles.poor]: isRisk,
                      })}
                      key={_index}
                      onClick={() => {
                        if (isRisk) {
                          showModal();
                          setRiskClusterItem(clusterItem);
                        }
                      }}
                    >
                      <p className={Styles.title}>{clusterItem.name}</p>
                      <p>
                        {intl.formatMessage({
                          id: 'diagnosticPrediction.riskPrediction.voltageRisk',
                        })}
                        :&nbsp;&nbsp;{clusterItem?.voltageRiskCount}
                        {intl.formatMessage({
                          id: 'diagnosticPrediction.riskPrediction.indivual',
                        })}
                      </p>
                      <p>
                        {intl.formatMessage({
                          id: 'diagnosticPrediction.riskPrediction.temperatureRisk',
                        })}
                        :&nbsp;&nbsp;{clusterItem?.tempRiskCount}
                        {intl.formatMessage({
                          id: 'diagnosticPrediction.riskPrediction.indivual',
                        })}
                      </p>
                    </div>
                  );
                })}
              </Flex>
            </div>
          ))}
        </Flex>
      ) : (
        <Empty style={{ height: 300 }} />
      )}
      <Modal
        title={`${riskClusterItem.name}风险信息`}
        open={isModalOpen}
        onCancel={handleCancel}
        footer={false}
        width={1200}
        destroyOnClose={true}
      >
        <Tabs
          items={[
            {
              key: '1',
              label: '电压风险',
              children: <RiskList type={'0'} clusterCode={riskClusterItem?.code} />,
            },
            {
              key: '2',
              label: '温度风险',
              children: <RiskList type={'1'} clusterCode={riskClusterItem?.code} />,
            },
          ]}
          tabsLevel={2}
          className={Styles.riskTabs}
        />
      </Modal>
    </Card>
  );
};
export default List;
